<template>
  <view class="container">
    <view class="resource-list">
      <view class="resource-item" v-for="(resource, index) in resourceList" :key="index">
        <view class="resource-info">
          <text class="title">{{resource.title.rendered}}</text>
          <rich-text class="desc" :nodes="resource.excerpt.rendered"></rich-text>
        </view>
        <view class="download-btn" @click="downloadResource(resource)">
          下载资源
        </view>
      </view>
    </view>
    
    <view class="loading" v-if="loading">加载中...</view>
    <view class="no-more" v-if="noMore">没有更多了</view>
  </view>
</template>

<script>
import api from '@/api/wordpress'

export default {
  data() {
    return {
      resourceList: [],
      page: 1,
      loading: false,
      noMore: false
    }
  },
  onLoad() {
    this.getResourceList()
  },
  methods: {
    async getResourceList() {
      if(this.loading || this.noMore) return
      
      this.loading = true
      try {
        // 这里需要根据您的WordPress文章分类ID来获取资源类文章
        const [err, res] = await api.getCategoryPosts('资源分类ID', this.page)
        if (!err && res.data) {
          this.resourceList = [...this.resourceList, ...res.data]
          if(res.data.length < 10) {
            this.noMore = true
          }
        }
      } catch(e) {
        uni.showToast({
          title: '获取资源失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    downloadResource(resource) {
      // 实现下载逻辑
      uni.showToast({
        title: '开始下载',
        icon: 'none'
      })
    }
  },
  onReachBottom() {
    if(!this.noMore) {
      this.page++
      this.getResourceList()
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}
.resource-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}
.download-btn {
  background-color: #007AFF;
  color: #fff;
  padding: 10rpx 30rpx;
  border-radius: 8rpx;
  display: inline-block;
}
</style> 